<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/css/iw.css" rel="stylesheet">
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/js/iw.js"></script>
    <script src="${ctx}/test/test.js"></script>
    <script src="${ctx}/layui/layui.js"></script>
</head>
<style>
    a:focus,
    a:active:focus,
    a.active:focus,
    a.focus,
    a:active.focus,
    a.active.focus {
        outline: none;
        border-color: transparent;
        box-shadow: none;
        text-decoration: none;
    }

    .menu-nav {
        background-color: #393D49;
        border: none;
    }

    .layui-nav-tree .layui-nav-child a {
        color: rgba(255, 255, 255, .7);
        padding: 0 0 0 30px;
    }

    .layui-nav-tree .layui-nav-item a:hover {
        text-decoration: none;
        background: #009688;
    }

    .layui-nav .layui-nav-item a:hover {
        text-decoration: none;
    }

    .layui-nav-tree .layui-nav-bar {
        display: none;
    }

    .primary {
        background: #262727;
    }
</style>
<body onresize="resize()">
<!-- 导航栏 -->
<nav class="navbar navbar-default navbar-static-top primary" style="border: none;">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand primary" href="javascript:void(0);"> ${appname}后台 V${pver}</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse"
             id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right navbar-vertial">
                <li class="dropdown primary">
                    <a href="#" class="dropdown-toggle primary manager_btn" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">
                        <#--<a href="#" class="dropdown-toggle primary manager_btn" id="manageBtn" role="button"-->
                        <#--aria-haspopup="true" aria-expanded="false">-->
                        <#if user??>${user.nickname}</#if> <span class="caret"></span></a>
                    <ul class="dropdown-menu manager_list" id="target">
                        <li><a href="javascript:void(0);" data-size="md" data-title="我的资料" data-href="/user/profile">我的资料</a>
                        </li>
                        <li><a href="javascript:void(0);" data-size="sm" data-title="修改密码" data-href="/user/updatepass">修改密码</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="javascript:void(0);" onClick="logout()">安全登出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- 左侧菜单栏 -->
<div id="menus" class="menu-nav">
    <ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink="all" style="width:196px;">
        <#--<li class="layui-nav-item">-->
        <#--<a href="javascript:;" data-id="console" data-title="控制台"-->
        <#--data-href="https://www.baidu.com"><span class="icon-dashboard"></span>控制台</a>-->
        <#--</li>-->
        <#if menus??>
            <#list menus as menu>
                <#if menu.items?? && (menu.items?size>0)>
                    <li class="layui-nav-item ayui-nav-itemed">
                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button">
                            <span class="${menu.icon}"></span>
                            ${menu.title}
                        </a>
                        <dl class="layui-nav-child">
                            <#list menu.items as item>
                                <dd>
                                    <a href="javascript:void(0);" data-id="${item.resource}" data-title="${item.title}"
                                       data-href="${item.path}"><span class="${item.icon}"></span>${item.title}</a>
                                </dd>
                            </#list>
                        </dl>
                    </li>
                <#else>
                    <li>
                        <a href="javascript:void(0);" data-id="${menu.resource}" data-title="${menu.title}"
                           data-href="${menu.path}"><span class="${menu.icon}"></span>${menu.title}</a>
                    </li>
                </#if>
            </#list>
        </#if>
    </ul>
</div>

<!-- 内容区 -->
<div id="contents" class="page-content"></div>

<script>
    layui.use('element', function () {
        var element = layui.element;
    });

    var resize = function () {
        var height = document.body.clientHeight;
        $("#menus").height(height - 60);
        $("#contents").height(height - 70);
    };

    var logout = function () {
        if (confirm("确定退出系统？")) {
            var form = $("<form>").attr({
                "action": "/logout",
                "method": "post"
            }).css("display", "none");
            $("body").append(form);
            form.submit();
        }
    };

    $(function () {

        resize();

        iw.init({
            container: "#contents",
            console: {
                id: 'console',
                title: '控制台',
                href: 'http://www.baidu.com'
            }
        });

        $("#menus li a").click(function () {
            var id = $(this).attr("data-id");
            var title = $(this).attr("data-title");
            var href = $(this).attr("data-href");
            if (id) {
                iw.open({
                    id: id,
                    title: title,
                    href: href
                });
            }
        });

        $("#target li a").click(function () {
            var title = $(this).attr("data-title");
            var href = $(this).attr("data-href");
            var size = $(this).attr("data-size");
            if (href) {
                iw.dialog({
                    size: size,
                    title: title,
                    href: href
                });
            }
        });
    });
</script>
</body>
</html>